* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

input {
  -webkit-appearance: none;
}

img, a {
  -webkit-touch-callout: none;
}

body {
  position: relative;
  min-width: 320px;
  max-width: 540px;
  margin: 0 auto;
  color: white;
  background: #F2F2F2;
  overflow-x: hidden;
  font: normal 16px/1.5 PingFangSC-regular, Tahoma, Lucida Grande, Verdana, Microsoft Yahei, STXihei, hei;
}

.search-index {
  display: flex;
  height: 50px;
  color: #666;
  padding-left: 12px;

  .search {
    flex: 1;
    height: 32px;
    line-height: 32px;
    border-radius: 16px;
    border: 1px solid #0086f6;
    background: white;
    margin-top: 12px;
    padding-left: 35px;
    position: relative;

    &::before {
      content: '';
      display: block;
      width: 14px;
      height: 14px;
      background: url("../images/sprite.png") no-repeat;
      background-size: 21px auto;
      position: absolute;
      left: 14px;
      top: 9px;
    }
  }

  .login {
    width: 50px;
    height: 40px;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 8px;

    &::before {
      content: '';
      display: block;
      width: 20px;
      height: 22px;
      background: url("../images/sprite.png") no-repeat 0 -36px;
      background-size: 21px auto;
    }
  }
}

.focus {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  overflow: hidden;

  a {
    width: 100%;
    transform: translate(-25%);

    img {
      width: 150%;
      height: 330px;
      border-bottom-left-radius: 100%;
      border-bottom-right-radius: 100%;
    }
  }
}

.local-nav {
  display: flex;
  margin: 215px 15px 10px;
  color: #666;
  background: white;
  font-size: 12px;

  li {
    flex: 1;
    justify-content: space-around;

    a {
      width: 100%;
      height: 70px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 5px 0;

      i {
        display: block;
        width: 40px;
        height: 40px;
        background: url("../images/localnav_bg.png") no-repeat;
        background-size: 40px auto;
      }
    }

    &:nth-of-type(2) a i {
      background-position: 0 -40px;
    }
    &:nth-of-type(3) a i {
      background-position: 0 -80px;
    }
    &:nth-of-type(4) a i {
      background-position: 0 -120px;
    }
    &:nth-of-type(5) a i {
      background-position: 0 -160px;
    }
  }
}
